<div>
  <h1>Posts</h1>
  @if (postsQuery.isPending()) {
    Loading...
  } @else if (postsQuery.isError()) {
    Error: {{ postsQuery.error().message }}
  } @else if (postsQuery.isSuccess()) {
    <div class="todo-container">
      @for (post of postsQuery.data(); track post.id) {
        <p>
          <!--          We can access the query data here to show bold links for-->
          <!--          ones that are cached-->
          <a
            routerLink="post/{{ post.id }}"
            [style]="
              queryClient.getQueryData(['post', post.id])
                ? {
                    fontWeight: 'bold',
                    color: 'green',
                  }
                : {}
            "
            >{{ post.title }}</a
          >
        </p>
      }
    </div>
  }
  <div>
    @if (postsQuery.isFetching()) {
      Background Updating...
    }
  </div>
</div>
